<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="编号">
        <el-input v-model="formInline.eid" placeholder="编号"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formInline.ename" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="formInline.sex" placeholder="性别">
            <el-option label="" value=""></el-option>
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item>
        <!-- 查询 -->
        <el-button type="primary" @click="onSubmit"
          ><i class="el-icon-search"></i
        ></el-button>
        <!-- 批量删除 -->
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          @click="changemany"
        ></el-button>
        <el-button
          type="info"
          icon="el-icon-circle-plus"
          circle
          @click="add"
        ></el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="#" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">
            <!-- 复选框 -->
            <label
              for="label"
              @click="changestate(scope.row.eid)"
              v-if="scope.row.softdel == 0"
            >
              <input type="checkbox" id="label" />
            </label>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="姓名" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ename }}</span>
        </template>
      </el-table-column>

      <el-table-column label="员工账号" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.eaccount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="性别" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.sex }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系方式" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="照片" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.photo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="银行卡号" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.bankcard }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.softdel == 0"
            >正常</span
          >
          <span style="margin-left: 10px" v-if="scope.row.softdel == 1"
            >已删除</span
          >
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
            v-if="scope.row.softdel == 0"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
            v-if="scope.row.softdel == 0"
            >删除</el-button
          >

          <el-button size="mini" type="success" v-if="scope.row.softdel != 0"
            >已删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="eaccount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditok">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增员工信息" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="eaccount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="ename" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="sex" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="相片" :label-width="formLabelWidth">
          <el-input v-model="photo" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="银行卡" :label-width="formLabelWidth">
          <el-input v-model="bankcard" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="工资" :label-width="formLabelWidth">
          <el-input v-model="sal" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handleAddOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="sum"
      >
      </el-pagination>
    </div>
  </div>
</template>


<style>
/* 表的颜色 */
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>


<script>
export default {
  created() {
    this.list();
  },
  data() {
    return {
      //搜索数据
      formInline: {
        emp: "",
        eid: "",
        ename: "",
        sex: "",
      },
      // 列表展示数据
      tableData: "",

      //复选框id
      eid2: "",
      eids: [],

      //修改员工薪资数据
      dialogTableVisible: false,
      dialogFormVisible: false,
      //新增员工信息
      dialogTableVisible1: false,
      dialogFormVisible1: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      eid: "",
      eaccount: "",
      phone: "",
      ename: "",
      sex: "",
      photo: "",
      bankcard: "",
      sal: "",
      //分页数据
      current: 1,
      size: 5,
      sum: "", //记录总条数
    };
  },
  methods: {
    //表格颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.softdel == 0) {
        return "warning-row";
      } else if (row.softdel == 1) {
        return "success-row";
      }
      return "";
    },
    //列表展示
    list() {
      let self = this;
      this.$axios
        .post("/ever-emp/select/" + this.size + "/" + this.current, {
          eid: this.formInline.eid,
          ename: this.formInline.ename,
          sex: this.formInline.sex,
        })
        .then((res) => {
          console.log(res), (self.tableData = res.data);
          //分页
          if (res.data.length == 0) {
            self.sum = 0;
          }
          self.sum = res.data[0].sum;
          //将内存中的已经改变状态的rids清空     无法清空
          // self.rids = []
        });
    },
    // 审核一个
    handleDelete(row) {
      let empLists = row.eid;
      this.$axios
        .delete("/ever-emp/deleteByList?empLists=" + empLists)
        .then((res) => {
          this.list();
        });
    },
    //审核多个
    changemany() {
      let empLists = this.eids;
      this.$axios
        .delete("/ever-emp/deleteByList?empLists=" + empLists)
        .then((res) => {
          this.list();
        });
    },

    //编辑，修改一个人的信息
    handleEdit(row) {
      this.eid = row.eid;
      this.eaccount = row.eaccount;
      this.phone = row.phone;
      this.dialogFormVisible = true;
    },
    //确认修改一个人的信息
    handleEditok() {
      this.dialogFormVisible = false;
      let parm = {
        eid: this.eid,
        eaccount: this.eaccount,
        phone: this.phone,
      };
      this.$axios.put("/ever-emp/update", parm).then((res) => {
        this.$message("修改成功");
        this.list();
      });
    },
    //新增员工方法，打开弹窗
    add() {
      this.dialogFormVisible1 = true;
    },
    //新增确认按钮
    handleAddOk() {
      this.dialogFormVisible1 = false;
      let parm = {
        ename: this.ename,
        sex: this.sex,
        photo: this.photo,
        bankcard: this.bankcard,
        eaccount: this.eaccount,
        phone: this.phone,
        sal: this.sal,
      };
      this.$axios.post("/ever-emp/save", parm).then((res) => {
        this.eaccount = this.ename = this.sex = this.phone = this.bankcard = this.photo = this.sal =
          "";
        this.$message("添加成功");
        this.list();
      });
    },
    //搜索方法
    onSubmit() {
      this.list();
    },
    //分页
    //每页几条
    handleSizeChange(val) {
      this.size = val;
      this.onSubmit();
    },
    //第一页
    handleCurrentChange(val) {
      this.current = val;
      this.onSubmit();
    },

    //获取复选框中的数据
    changestate(eid) {
      // 判断sid是否已经添加到 sids中
      if (this.eids.find((eid2) => eid2 == eid) > 0) {
        //存在就删除
        this.eids.splice(this.eids.indexOf(eid), 1);
        return;
      }
      this.eids.push(eid);
    },
  },
};
</script>